<template>
  <div class="qselect" tabindex="-1" @focus="show"  v-clickoutside="handleClickOutSide">
      <label v-if="mValue === ''">{{msg}}</label>
      <!--<span class="label-span" v-else>{{msg2}}</span>-->
      <span class="label-span" v-else>FY{{this.currtimeComputed2}}/{{msg3}}</span>
    <!--<input type="text" placeholder="Please select a q" v-model="msg">-->
      <i  class="el-icon-date clearbtn" ></i>
      <el-collapse-transition>
      <div v-show="qmaskshow" class="qmask">
        <div class="tab">
          <i class="el-icon-d-arrow-left leftbtn" @click="left"></i>
          <!--<span class="qtxt">{{this.currtime-3}}年-{{this.currtime}}年</span>-->
          <!--<span class="qtxt">{{this.currtime}}</span>-->
          <span class="qtxt">FY{{this.currtimeComputed}}</span>
          <i class="el-icon-d-arrow-right rightbtn"  @click="right"></i>
          <table class="qtable">
            <template>
              <tr>
                <td @click="qclick(1,currtime,1)">{{qdata[0]}}</td>
                <td @click="qclick(1,currtime,2)">{{qdata[1]}}</td>
                <td @click="qclick(1,currtime,3)">{{qdata[2]}}</td>
                <td @click="qclick(1,currtime,4)">{{qdata[3]}}</td>
              </tr>
              <tr>
                <td @click="qclick(1,currtime,5)">{{qdata[4]}}</td>
                <td @click="qclick(1,currtime,6)">{{qdata[5]}}</td>
                <td @click="qclick(1,currtime,7)">{{qdata[6]}}</td>
                <td @click="qclick(1,currtime,8)">{{qdata[7]}}</td>
              </tr>
              <tr>
                <td @click="qclick(1,currtime,9)">{{qdata[8]}}</td>
                <td @click="qclick(1,currtime,10)">{{qdata[9]}}</td>
                <td @click="qclick(1,currtime,11)">{{qdata[10]}}</td>
                <td @click="qclick(1,currtime,12)">{{qdata[11]}}</td>
              </tr>
            </template>
          </table>
          <!--<table class="qtable">-->
            <!--<template v-for="(item,index) in qdata">-->
              <!--<tr>-->
                <!--&lt;!&ndash;<td class="thead">{{item[0]}}</td>&ndash;&gt;-->
                <!--&lt;!&ndash;<template v-for="(itemsub,indexsub) in item">&ndash;&gt;-->
                  <!--&lt;!&ndash;<td :class="[{nosel:itemsub < startT}, {nosel:itemsub > endT},{active:itemsub === selqdata}]" @click="qclick(itemsub,item[0],indexsub)" v-if="indexsub !== 0">Q{{indexsub}}</td>&ndash;&gt;-->
                <!--&lt;!&ndash;</template>&ndash;&gt;-->
                <!--<template v-for="(itemsub,indexsub) in item">-->
                  <!--<td :class="[{nosel:itemsub < startT}, {nosel:itemsub > endT},{active:itemsub === selqdata}]" @click="qclick(itemsub,item[0],indexsub)" v-if="indexsub !== 0">Q{{indexsub}}</td>-->
                <!--</template>-->
              <!--</tr>-->
            <!--</template>-->
          <!--</table>-->
        </div>
      </div>
      </el-collapse-transition>
  </div>
</template>

<script>
import clickoutside from './clickoutside';

export default {
  name: 'qselect',
  props: {
    value: String,
    time: Number,
    startT: Number,
    endT: Number
  },
  directives: {
    'clickoutside': clickoutside
  },
  data() {
    return {
      qmaskshow: false,
      // msg: '请选择月份',
      // msg: 'Please select a mon',
      msg2: '',
      msg3: '',// 单独的月份
      mValue: '',
      // qdata: [],
      qdata: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      rowNum: [1, 2, 3],
      selqdata: 0,
      currtime: 0,
      currtimeComputed2: ''
    };
  },
  computed: {
    msg () {
      return this.$t('filter.month')
    },
    currtimeComputed() {
      let first = String(this.currtime).slice(2,4)
      let last = +first + 1
      return first + last
    }
  },
  mounted() {
    this.currtime = this.time;
    // this.init();
  },
  methods: {
    handleClickOutSide() {
      this.qmaskshow = false;
    },
    // init() {
    //   this.qdata = [];
    //   for (var i = this.currtime - 3; i <= this.currtime; i++) {
    //     this.qdata.push([i, parseInt(`${i}1`), parseInt(`${i}2`), parseInt(`${i}3`), parseInt(`${i}4`)]);
    //   }
    // },
    qclick(seltime, year, index) {
      if (index < 10) {
        index = `0${index}`
      }
      // const s = this.startT;
      // const e = this.endT;
      // if (seltime >= s && seltime <= e) {
      //   this.selqdata = seltime;
      //   this.msg = `${year}Q${index}`;
      //   this.$emit('input', this.msg);
      // }
      this.selqdata = seltime;
      // this.msg = `${year}/${index}`;
      this.msg2 = `${year}/${index}`;
      this.msg3 = `${index}`;
      this.mValue = `${year}${index}`;
      this.currtimeComputed2 = this.currtimeComputed
      // this.$emit('input', this.msg);
      this.$emit('input', this.mValue);
      this.$emit('change', `FY${this.currtimeComputed2}/${this.msg3}`);
    },
    show() {
      this.qmaskshow = true;
    },
    left() {
      // this.currtime -= 3;
      this.currtime -= 1;
      // this.currtime -= 101;
      // this.init();
    },
    right() {
      // this.currtime += 3;
      this.currtime += 1;
      // this.currtime += 101;
      // this.init();
    }
  }
};
</script>

<style lang="scss" scoped>
  .qselect {
    user-select: none;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    /*width: 195px;*/
    width: 165px;
    height: 40px;
    border: 1px solid #bfcbd9;
    background-color: #fff;
    border-radius: 4px;
    padding-left: 10px;
    outline: none;
    color: #5a5e66;
    label {
      font-size: 14px;
      font-family: sans-serif;
      font-weight: 530;
      line-height: 40px;
      color: #bfcbd9;
      margin-left: 12px;
      padding-left: 10px;
    }
    .label-span {
      margin-left: 12px;
      padding-left: 10px;
    }
    .clearbtn {
      position: absolute;
      left: 0;
      top: 0;
      width: 36px;
      height: 30px;
      text-align: center;
      line-height: 40px;
      color: #bfcbd9;
      cursor: pointer;
    }
    .qmask {
      position: absolute;
      right: 0;
      /*top: 36px;*/
      top: 40px;
      background-color: #fff;
      width: 196px;
      height: 200px;
      border: 1px solid #d1dbe5;
      border-radius: 4px;
      z-index: 2003 !important;
      .tab {
        position: relative;
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-align: center;
        font-size: 14px;
        color: #999;
        .leftbtn {
          position: absolute;
          left: 0;
          top: 0;
          height: 36px;
          width: 36px;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
        }
        .rightbtn {
          position: absolute;
          right: 0;
          top: 0;
          height: 36px;
          width: 36px;
          line-height: 36px;
          text-align: center;
          cursor: pointer;
        }
        .qtxt {
          display: inline-block;
          height: 36px;
          line-height: 36px;
          color: #999;
        }
        .qtable {
          width: 100%;
          td {
            width: 25%;
            cursor: pointer;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            padding: 0;
            /*padding: 0 6px;*/
          }
          .thead {
            cursor: default;
          }
          .active {
            background-color: #20a0ff;
            color: #fff;
          }
          /*禁用状态*/
          /*.nosel{*/
          /*color: #bfcbd9;*/
          /*cursor: not-allowed;*/
          /*}*/
        }
      }
    }
  }
</style>
